// 引入清除默认样式
@use "./reset.scss";
// 进度条配置
@use "./nprogress.scss";
// element配置
@use "./element.scss";

@import url('https://fonts.googleapis.com/css?family=Roboto:400,600&display=swap');
@import url('https://fonts.googleapis.com/css?family=Work+Sans:400,600,700,800&display=swap');
@import url('https://fonts.googleapis.com/css?family=Oswald:400,600,700,800&display=swap');
@import url('https://fonts.googleapis.com/css?family=Rubik&display=swap');
@import url('https://fonts.googleapis.com/css?family=Anton&display=swap');
@import url('https://fonts.googleapis.com/css?family=Heebo:100,300,400,500,700,800,900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Dancing+Script|Open+Sans&display=swap');

/* 字体 */
@font-face {
  font-family: "KoiFont";
  src: url("../assets/fonts/KoiFont.woff2");
  // 本地加载慢，可将字体资源上传使用cdn加速
  // src: url(xxx字体地址)
}

/* 全局样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'KoiFont', 'Roboto', sans-serif;
  scrollbar-color: var(--el-scrollbar-bg-color) var(--el-fill-color-light);
  // 修改鼠标
  cursor: url("../assets/mouse/index.cur"), auto !important;
}

// 隐藏滚动条
// ::-webkit-scrollbar {
//   display: none; /* Chrome, Safari and Opera */
// }

/* 滚动条 Begin */
::-webkit-scrollbar {
  width: 6px; // 竖向滚动条宽度
  height: 6px; // 横向滚动条宽度
}

::-webkit-scrollbar-track {
  border-radius: 10px
}

::-webkit-scrollbar-thumb {
  background-color: #0003;
  border-radius: 10px;
  transition: all .2s ease-in-out
}

::-webkit-scrollbar-thumb:hover {
  cursor: pointer;
  background-color: #0000004d
}

.dark ::-webkit-scrollbar-thumb {
  background-color: #fff3
}

.dark ::-webkit-scrollbar-thumb:hover {
  background-color: #fff6
}

// 明亮模式显示背景颜色
html {
  background: #fffdf9;
  // 明亮遮罩层
  .mask-cover {
    pointer-events: none;
    position: absolute;
    background: linear-gradient(180deg, hsla(0, 0%, 98%, 0) 0, hsla(0, 0%, 98%, .013) 8.1%, hsla(0, 0%, 98%, .049) 15.5%, hsla(0, 0%, 98%, .104) 22.5%, hsla(0, 0%, 98%, .175) 29%, hsla(0, 0%, 98%, .259) 35.3%, hsla(0, 0%, 98%, .352) 41.2%, hsla(0, 0%, 98%, .45) 47.1%, hsla(0, 0%, 98%, .55) 52.9%, hsla(0, 0%, 98%, .648) 58.8%, hsla(0, 0%, 98%, .741) 64.7%, hsla(0, 0%, 98%, .825) 71%, hsla(0, 0%, 98%, .896) 77.5%, hsla(0, 0%, 98%, .951) 84.5%, hsla(0, 0%, 98%, .987) 91.9%,#ffffff);
  }
}

// 暗黑模式显示背景颜色
html.dark {
  background: linear-gradient(to right, #434343 0, black 100%);
  // 暗黑遮罩层
  .mask-cover {
    pointer-events: none;
    position: absolute;
    background: linear-gradient(180deg, hsla(0, 0%, 13%, 0) 0, hsla(0, 0%, 13%, .013) 8.1%, hsla(0, 0%, 13%, .049) 15.5%, hsla(0, 0%, 13%, .104) 22.5%, hsla(0, 0%, 13%, .175) 29%, hsla(0, 0%, 13%, .259) 35.3%, hsla(0, 0%, 13%, .352) 41.2%, hsla(0, 0%, 13%, .45) 47.1%, hsla(0, 0%, 13%, .55) 52.9%, hsla(0, 0%, 13%, .648) 58.8%, hsla(0, 0%, 13%, .741) 64.7%, hsla(0, 0%, 13%, .825) 71%, hsla(0, 0%, 13%, .896) 77.5%, hsla(0, 0%, 13%, .951) 84.5%, hsla(00, 0%, 13%, .987) 91.9%, #1a1a1a );
  }
}

/* 头像旋转 Begin */
.user-avatar {
  cursor: pointer;
  transition: all 0.6s;
  user-select: none;
}

.user-avatar:hover {
  transform: rotate(360deg);
}

.rotate-box {
  animation: rotate-icon 5s linear infinite;
}

@keyframes rotate-icon {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(1turn);
    transform: rotate(1turn);
  }
}
/* 头像旋转 End */

/* 悬浮标题底部线条-多行影响标题高度 Begin */
.gradient-line {
  background-image: linear-gradient(to right, var(--el-color-primary) 0%, #e6e5e5 100%);
  background-position: 0 calc(100% - 0.1em);
  background-size: 0 2px;
  transition: background-size 0.25s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0s;
  padding: 0;
  display: inline;
  background-repeat: no-repeat;
  box-sizing: border-box;
  -webkit-transition: all .6s ease;
  transition: all .6s ease;
}

.gradient-line:hover{
  background-size: 100% 2px;
}
/* 悬浮标题底部线条 End */

/* 悬浮标题底部线条-单行 Begin */
.gradient-title {
  position: relative;
  display: inline-block;
  padding-bottom: 4px; /* 为伪元素留出空间 */
  cursor: pointer;
}

.gradient-title::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(to right, var(--el-color-primary) 0%, #e6e5e5 100%);
  transform: translateX(-50%);
  transition: width 0.5s, transform 0.5s;
}

.gradient-title:hover::after {
  width: 100%;
  transform: translateX(-50%);
}

.gradient-title::after {
  transition: width 0.5s, transform 0.5s 0.5s; /* 第二个过渡延迟0.5秒 */
}
/* 悬浮标题底部线条 End */

/* 标题横竖线条 Begin */
.row-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 40px;
}

.row-title:before {
  content: '';
  border-top: 2px solid var(--el-color-primary);
  -webkit-box-flex: 1;
  -ms-flex: 1 0 1em;
  flex: 1 0 1em;
}

.row-title:after {
  content: '';
  border-top: 2px solid var(--el-color-primary);
  -webkit-box-flex: 1;
  -ms-flex: 1 0 1em;
  flex: 1 0 1em;
}

.col-title:before {
  content: '';
  border: 0.5px solid var(--el-color-primary);
  text-align: left;
  margin: 0 1em 0 0;
  -webkit-box-flex: 1;
  -ms-flex: 1 0 1em;
}

.col-title:after {
  content: '';
  border-radius: 15px;
  border: 0.5px solid var(--el-color-primary);
  text-align: left;
  margin: 0 0 0 1em;
  -webkit-box-flex: 1;
  -ms-flex: 1 0 1em;
}
/* 标题横竖线条 End */
